Buttons

We used 2 maps for the button from $theme-colors dan $colors.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-accent">Accent</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-black">Black</button>

<button type="button" class="btn btn-cultured">Cultured</button>
<button type="button" class="btn btn-pale-pink">Pale Pink</button>
<button type="button" class="btn btn-medium-orchid">Medium Orchid</button>
<button type="button" class="btn btn-eerie-black">Eerie Black</button>

<button class="btn btn-rounded btn-primary">
    <img src="./assets/icons/heart.svg" class="svg-inject svg-icon" alt="" />
</button>
<button class="btn btn-rounded btn-orange-red text-white">
    <img src="./assets/icons/star.svg" class="svg-inject svg-icon is-16" alt="" />
</button>

Apply

<button class="btn btn-rounded btn-book">
    <img src="./assets/icons/heart.svg" class="svg-inject svg-icon" alt="" />
</button>
<button class="btn btn-apply fw-semiBold py-12 px-43 rounded-pill">Apply</button>

Variables

You can found SASS Variable on scss/components/bootstrap/_buttons.scss

Rounded

$btn-rounded-padding: 14px;
$btn-rounded-border-radius: 50rem;

$btn-rounded-icon-size: 20px;

Color Variant

// - Btn Book
$btn-book-background: $orange-red;
$btn-book-background__hover: $pale-pink;
$btn-book-color: $white;
$btn-book-color__hover: $btn-book-background;

$btn-book-booked-background: $white;
$btn-book-booked-color: $btn-book-background;
$btn-book-booked-border-color: $platinum;

// - Btn Apply
$btn-apply-background: $alice-blue;
$btn-apply-background__hover: $primary;
$btn-apply-color: $primary;
$btn-apply-color__hover: $white;